<template>
  <div @click="goLinkFn">
    <div class="tri_1"></div>
    <div class="tri_2"></div>
    <div class="tri_3"></div>
    <div class="tri_4"></div>
    <div class="name">{{ name }}</div>
  </div>
</template>

<script>
export default {
  name: "menuItem",
  props: {
    name: {
      type: String,
      default: "菜单",
    },
  },
  data() {
    return {
      // Add your data properties here
    };
  },
  methods: {
    goLinkFn() {
      this.$emit("click");
    },
  },
};
</script>

<style scoped lang="scss">
.left_item {
  width: fit-content;
  height: 30px;
  padding: 0 30px;
  line-height: 30px;
  text-align: center;
  font-family: Source Han Sans CN;
  font-size: 16px;
  color: #fff;
  background: rgb(2, 82, 107, 0.4);
  position: relative;
  margin-left: 18px;
  &.act,
  &:hover {
    background: rgb(2, 82, 107, 1);
  }
  &:first-child {
    margin-left: 0;
  }
  cursor: pointer;
  .tri_1,
  .tri_2,
  .tri_3,
  .tri_4 {
    width: 7px;
    height: 7px;
    border-color: #02fff4;
    border-style: solid;
    position: absolute;
  }
  .tri_1 {
    border-left-width: 2px;
    border-top-width: 2px;
    left: -1px;
    top: -1px;
  }
  .tri_2 {
    border-right-width: 2px;
    border-top-width: 2px;
    right: -1px;
    top: -1px;
  }
  .tri_3 {
    border-left-width: 2px;
    border-bottom-width: 2px;
    left: -1px;
    bottom: -1px;
  }
  .tri_4 {
    border-right-width: 2px;
    border-bottom-width: 2px;
    right: -1px;
    bottom: -1px;
  }
}
</style>
